<script>
import {defineAsyncComponent} from "vue"
//同步加载组件
import Test24组件切换1a from './components/Test24组件切换1.vue'
//异步加载组件，当用到的时候在加载
const Test24组件切换2b = defineAsyncComponent(() =>
    import('./components/Test24组件切换2.vue')
)

export default {
  components: {
    Test24组件切换1a,
    Test24组件切换2b
  },
  data() {
    return {
      //值必须和components注册的页面名称一致
      typePage: 'Test24组件切换1a'
    }
  },
  methods: {
    myClick() {
      if (this.typePage == 'Test24组件切换1a') {
        this.typePage = 'Test24组件切换2b'
      } else {
        this.typePage = 'Test24组件切换1a'
      }
    }
  }
}
</script>

<template>
  <div>切换组件</div>
  <!--
        :is='typePage'：设置组件页面，值要和components注册的页面名称一致，
        每次切换组件都会导致组件重新创建，里面的数据也会重新创建，比如请求的数据没有了,
        保持存活:外面嵌套keep-alive标签，禁止组件销毁，这时的组件没有销毁存在内存里面，让切换的组件
        保持存活状态
   -->
  <keep-alive>
    <component :is='typePage'></component>
  </keep-alive>
  <button @click=myClick>切换1</button>
</template>
